{% extends 'home.html' %}

{% block content %}

    <form class="form-group" method="post" name="form1" id="form1">

        {% csrf_token %}
        <script type="text/javascript">
            //<![CDATA[
            var theForm = document.forms['form1'];
            if (!theForm) {
                theForm = document.form1;
            }

            function __doPostBack(eventTarget, eventArgument) {
                if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
                    theForm.__EVENTTARGET.value = eventTarget;
                    theForm.__EVENTARGUMENT.value = eventArgument;
                    theForm.submit();
                }
            }

            //]]>
        </script>


        <div class="panel panel-primary">
            <div class="panel-heading"><h4>仪器基本信息</h4></div>
            <div class="panel-body">
                {% for field in form %}
                    <div class="form-group col-xs-3">
                        <label>{{ field.label }}</label>
                        {{ field }}
                        <span style="color:red;">{{ field.errors.0 }}</span>
                    </div>
                {% endfor %}
            </div>
        </div>

        <div class="panel panel-primary form-group">
            <div class="panel-heading"><h4>标准器及配套设备</h4></div>
            <div class="panel-body">
                <table class="table form-group" style="text-align: center;">
                    <tbody>
                    <tr>
                        <th style="text-align:center">名称/型号</th>
                        <th style="text-align:center">编号</th>
                        <th style="text-align:center">测量范围</th>
                        <th style="text-align:center">批号/证书编号</th>
                        <th style="text-align:center">有效期</th>
                        <th style="text-align:center">校准机构</th>
                        <th style="text-align:center">计量特性</th>
                    </tr>
                    <tr>
                        {% for field in tool_form %}
                            <td>
                                {{ field }}
                            </td>
                        {% endfor %}
                    </tr>
                    <tr>
                        {% for field in tool_form1 %}
                            <td>
                                {{ field }}
                            </td>
                        {% endfor %}
                    </tr>

                    </tbody>
                </table>

            </div>
        </div>

        <div class="panel panel-primary form-group">
            <div class="panel-heading"><h4>通用技术要求</h4></div>
            <table style="margin-top: 10px;margin-bottom: 10px;">
                <tbody>
                <tr>
                    <th style="margin-left: 10px;">外观及通电检查：</th>
                    <td colspan="2">符合 <input id="A1PH_Wgjcfh56" type="checkbox"
                                                name="A1PH_Wgjcfh56"></td>
                    <td colspan="3">不符合 <input id="A1PH_Wgjcbfh57" type="checkbox"
                                                  name="A1PH_Wgjcbfh57"></td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="panel panel-primary ">
            <div class="panel-heading"><h4>示值误差</h4></div>
            <div class="c-body ">

                <div class="row">
                    <div class="col-md-12" id="app">
                        <table name='myTable' id="myTable" class="table table-condensed form-group"
                               style="text-align: center;">
                            <thead>
                            <tr style="border-bottom: 2px solid rgb(51,122,183)">
                                <th>元素</th>
                                <th>检定点</th>
                                <th>标准值<br>(W1-W2)
                                    g
                                </th>
                                <th>测量值<br>
                                    ug
                                </th>
                                <th>差值 ug</th>
                                <th>示值误差<br>(平均值)
                                </th>
                                <th>技术要求
                                </th>
                            </tr>
                            </thead>

                            <tbody>
                            <tr style="border-top: 2px solid rgb(51,122,183)" class="form-group">
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="text" class="form-control" style="height: 30px;" name="row1011"
                                ></td>
                                <td><input class="form-control" style="height: 30px;" name="row1012"></td>
                                <td><input class="form-control" style="height: 30px;" name="row1013"
                                           id="row1013"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                            </tr>

                            <tr>
                                <td><span type="text">标准水</span></td>
                                <td><span type="text">10</span></td>
                                <td><input type="text" class="form-control" style="height: 30px;" name="row1021">
                                </td>
                                <td><input type="text" class="form-control" style="height: 30px;" name="row1022">
                                </td>
                                <td><input type="number" class="form-control" style="height: 30px;" name="row1023"
                                           id="row1023">
                                </td>
                                <td><input type="text" class="form-control" style="height: 30px;" id="mean10"
                                           name="mean10"
                                />
                                </td>
                                <td><span type="text">≤ ± 3.5 μg</span></td>
                            </tr>

                            <tr style="border-bottom: 2px solid rgb(51,122,183)">
                                <td><input type="hidden" class="form-control" style="height: 30px;" readonly="readonly">
                                </td>
                                <td><input type="hidden" class="form-control" style="height: 30px;" name="row1031"></td>
                                <td><input type="number" class="form-control" style="height: 30px;" name="row1032"></td>
                                <td><input type="number" class="form-control" style="height: 30px;" name="row1033"></td>
                                <td><input type="number" class="form-control" style="height: 30px;" id="row1033"
                                >
                                </td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                            </tr>

                            <tr>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                            </tr>
                            <tr>
                                <td><span type="text">标准水</span></td>
                                <td><span type="text">10</span></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><span type="text">≤ ± 8 μg</span></td>
                            </tr>

                            <tr style="border-bottom: 2px solid rgb(51,122,183)">
                                <td><input type="hidden" class="form-control" style="height: 30px;" readonly="readonly">
                                </td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                            </tr>

                            <tr>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                            </tr>

                            <tr>
                                <td><span type="text">标准水</span></td>
                                <td><span type="text">10</span></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><span type="text">≤ ± 53 μg</span></td>
                            </tr>

                            <tr style="border-bottom: 2px solid rgb(51,122,183)">
                                <td><input type="hidden" class="form-control" style="height: 30px;" readonly="readonly">
                                </td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                            </tr>

                            <tr>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                            </tr>

                            <tr>
                                <td><span type="text">标准水</span></td>
                                <td><span type="text">10</span></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><span type="text">≤ ± 253 μg</span></td>
                            </tr>

                            <tr>
                                <td><input type="hidden" class="form-control" style="height: 30px;" readonly="readonly">
                                </td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="number" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                                <td><input type="hidden" class="form-control" style="height: 30px;"></td>
                            </tr>


                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Send invitation</button>
    </form>

{% endblock %}

{% block js %}
    <script>
        $(document).ready(function () {
            calculateTotal();

            $('#myTable').on('change', '.form-control', function () {
                calculateTotal();

            });

            function calculateTotal() {
                $('#myTable tr:gt(0)').each(function () {
                    var cell1 = parseFloat($(this).find('td:eq(2) input').val());  // 第一列
                    var cell2 = parseFloat($(this).find('td:eq(3) input').val());  // 第二列
                    var difference = cell1 - cell2;
                    $(this).find('td:eq(4) input').val(difference);
                    //var price = parseFloat($(this).val()) || 0;
                    //total += price;
                });

                $('#mean10').val(function () {
                    return (parseFloat($('#row1013').val()) + parseFloat($('#row1023').val()) + parseFloat($('#row1033').val())) / 3
                })
            }


        });
    </script>




{% endblock %}